import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, incrementByAmount, incrementAsync } from './redux/SliceReducer/counterReducer'

export default function App() {
  const count = useSelector((state) => {
    console.log(state);
    return state.counter.value
  })
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(decrement())}
        >
          decrement
        </button>


        <br/>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(incrementByAmount(6))}
        >
          incrementByAmount
        </button>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(incrementAsync(6))}
        >
          incrementAsync
        </button>
      </div>
    </div>
  )
}